<template>
<div class="panel">
    <div class="panel-header">
        <div class="bl"></div>
        <div class="title">合同信息</div>
        <div class="more">
            <el-button v-has="'order-update'" type="primary" @click="showEditView">编辑</el-button>
        </div>
    </div>
    <div class="panel-body">
        <el-descriptions :column="2" border :labelStyle="{width:'8rem'}">

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-wallet"></i>
                    合同金额
                </template>
                {{bom.totals}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    门店
                </template>
                {{bom.store.title}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-dish"></i>
                    套餐
                </template>
                {{bom.package.title}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-pie-chart"></i>
                    入住天数
                </template>
                {{bom.check_time}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-chat-square"></i>
                    备注
                </template>
                {{bom.remark}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-paperclip"></i>
                    附件
                </template>
                <upload-file-list :file-list="bom.files"></upload-file-list>
            </el-descriptions-item>
        </el-descriptions>
    </div>

    <edit-bom-view ref="editBomView"></edit-bom-view>
</div>
</template>

<script>
// files
import uploadFileList from '@/components/files/index';
import {
    bom,
    order
} from '../model.js';
import editBomView from './edit-order-bom.vue';

export default {
    components: {
        editBomView,
        uploadFileList
    },
    props: {
        bom: {
            type: Object,
            default: function () {
                return Object.assign({}, bom);
            }
        },
        order: {
            type: Object,
            default: function () {
                return Object.assign({}, order);
            }
        }
    },
    methods: {
        showEditView() {
            console.log(this.bom, this.order);
            if (this.order.id != this.bom.order_id) {
                this.$message.error('订单信息有误，请刷新页面后重试');
                return;
            }

            this.$nextTick(() => {
                this.$refs['editBomView'].showDrawer(this.bom);
            });
        }
    }
}
</script>

<style lang="less">

</style>
